---
title: インテグレーション
---

import { SiAngular, SiAstro, SiNextdotjs, SiReact, SiVuedotjs, SiWebcomponentsdotorg } from '@icons-pack/react-simple-icons'

Univer は様々な UI ライブラリやフレームワークとの統合をサポートしており、React、Vue、Angular など、異なる環境で Univer を利用することができます。Univer はシームレスな統合体験を提供します。

既にご利用のフレームワークやライブラリに慣れている場合は、該当する統合ガイドに直接進むことができます：

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="React 統合ガイド"
    href="/guides/sheets/getting-started/integrations/react"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Vue 統合ガイド"
    href="/guides/sheets/getting-started/integrations/vue"
 />
  <Card
    icon={<SiWebcomponentsdotorg className="text-indigo-400" />}
    title="Web Component 統合ガイド"
    href="/guides/sheets/getting-started/integrations/web-component"
 />
</Cards>

Univer を新規プロジェクトで統合したいユーザーのために、クイックスタート用のテンプレートも提供しています。以下のリンクから各テンプレートにアクセスできます：

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="Univer ❤️ Vite + React"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-react"
 />
  <Card
    icon={<SiAngular className="text-red-400" />}
    title="Univer ❤️ Angular"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-angular"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vue CLI + Vue@2.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue2"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vite + Vue@3.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue3"
 />
  <Card
    icon={<SiNextdotjs className="text-zinc-800 dark:text-zinc-200" />}
    title="Univer ❤️ Next.js"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-nextjs"
 />
  <Card
    icon={<SiAstro className="text-pink-400" />}
    title="Univer ❤️ Astro"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-astro"
 />
</Cards>
